import { View } from "@tarojs/components";
// eslint-disable-next-line import/first
import { Gem as GemType } from '@/types/global';
import { useEffect, useState } from "react";
import "./index.less";

interface GemProps {
  click: () => void;
  gemPosition?: string[]; // 宝石在宝石盘的位置 存储宝石id 若为空则为-1
  gemSource?: GemType[]; // 初始宝石列表
}

export default function GemComponent({ click, gemPosition, gemSource }: GemProps) {
  const rows = 5;
  const cols = 5;
  const [gemPositionList, setGemPositionList] = useState<string[]>([]);

  useEffect(() => {
    if (gemSource && gemSource.length > 0) {
      // 生成默认的宝石位置数组，存储宝石ID而不是索引
      const initialPositions = gemSource.map(gem => gem.id);
      setGemPositionList(initialPositions);
    }
  }, [gemSource]);

  // 如果没有传入宝石位置数据，则使用默认数据
  const getGemSource = (): GemType[] => {
    if (gemSource && gemSource.length > 0) {
      return gemSource;
    }
    
    // 默认宝石数据
    return [
      { id: "1", color: 'red' },
      { id: "2", color: 'red' },
      { id: "3", color: 'red' },
      { id: "4", color: 'red' },
      { id: "5", color: 'blue' },
      { id: "6", color: 'blue' },
      { id: "7", color: 'blue' },
      { id: "8", color: 'blue' },
      { id: "9", color: 'green' },
      { id: "10", color: 'green' },
      { id: "11", color: 'green' },
      { id: "12", color: 'green' },
      { id: "13", color: 'gold' },
      { id: "14", color: 'gold' },
      { id: "15", color: 'gold' },
      { id: "16", color: 'black' },
      { id: "17", color: 'black' },
      { id: "18", color: 'black' },
      { id: "19", color: 'black' },
      { id: "20", color: 'white' },
      { id: "21", color: 'white' },
      { id: "22", color: 'white' },
      { id: "23", color: 'white' },
      { id: "24", color: 'pink' },
      { id: "25", color: 'pink' },
    ];
  };

  const getGemPosition = (): string[] => {
    if (gemPosition && gemPosition.length > 0) {
      return gemPosition.map(id => id === "-1" ? "-1" : id);
    }
    return gemPositionList;
  };

  const currentGemSource = getGemSource();
  const currentGemPosition = getGemPosition();

  return (
    <View className='gemContainer' onClick={click}>
      <View className='gemList'>
        {Array.from({ length: rows }).map((_, rowIndex) => (
          <View key={rowIndex} className='grid-row'>
            {Array.from({ length: cols }).map((__, colIndex) => {
              const gemIndex = rowIndex * cols + colIndex;
              const gemId = currentGemPosition[gemIndex];
              // 修复逻辑：当gemId为"-1"时，表示该位置没有宝石，应该显示为空白
              // 根据宝石ID在gemSource数组中查找对应的宝石
              const gem = gemId !== "-1" ? currentGemSource.find(g => g.id === gemId) : null;
              const gemColor = gem ? gem.color : "empty";

              return (
                <View
                  key={`${rowIndex}-${colIndex}`}
                  className={`grid-cell ${gemColor}-gem`}
                >
                </View>
              );
            })}
          </View>
        ))}
      </View>
    </View>
  );
}
